<table-submenu></table-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">Table - <span class="subitem">Scroll</span></span>
        <span>Scrolling data is available horizontally, vertically or both. Optional virtual scrolling mode would be handy to deal with large datasets by loading data on demand during scrolling.
            In additon certain columns and rows can be fixed as well.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Vertical</h3>
    <p-table [columns]="cols" [value]="cars1" [scrollable]="true" scrollHeight="200px">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Virtual Scroll - 250K Rows</h3>
    <p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" [rows]="20" scrollHeight="200px"
            [virtualScroll]="true" (onLazyLoad)="loadDataOnScroll($event)" [virtualRowHeight]="28"
            [lazy]="true" [totalRecords]="totalRecords" [loading]="loading">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr style="height:28px">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Horizontal</h3>
    <p-table [columns]="cols" [value]="cars2" [scrollable]="true" [style]="{width:'500px'}">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" style="width:250px">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Horizontal and Vertical</h3>
    <p-table [columns]="cols" [value]="cars3" [scrollable]="true" [style]="{width:'500px'}" scrollHeight="200px">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" style="width:250px">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Frozen Rows</h3>
    <p-table [columns]="cols" [value]="cars4" [frozenValue]="frozenCars" [scrollable]="true" scrollHeight="200px">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="frozenrows" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    <b>{{rowData[col.field]}}</b>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Frozen Columns</h3>
    <p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars5" [scrollable]="true" scrollHeight="200px" frozenWidth="200px">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" style="width:200px">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Frozen Columns and Frozen Rows</h3>
    <p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [frozenValue]="frozenCars" [value]="cars5" [scrollable]="true" scrollHeight="200px" frozenWidth="200px">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" style="width:200px">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="frozenrows" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    <b>{{rowData[col.field]}}</b>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Frozen Column Groups</h3>
    <p-table [value]="sales" [scrollable]="true" scrollHeight="150px" frozenWidth="200px">
        <ng-template pTemplate="frozenheader">
            <tr>
                <th style="width:200px;height:102px">Brand</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="frozenbody" let-sale>
            <tr>
                <td>{{sale.brand}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th colspan="4">Sale Rate</th>
            </tr>
            <tr>
                <th colspan="2">Sales</th>
                <th colspan="2">Profits</th>
            </tr>
            <tr>
                <th>Last Year</th>
                <th>This Year</th>
                <th>Last Year</th>
                <th>This Year</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-sale>
            <tr>
                <td>{{sale.lastYearSale}}</td>
                <td>{{sale.thisYearSale}}</td>
                <td>{{sale.lastYearProfit}}</td>
                <td>{{sale.thisYearProfit}}</td>
            </tr>
        </ng-template>
    </p-table>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="tablescrolldemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablescrolldemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TableScrollDemo implements OnInit &#123;

    cars1: Car[];

    cars2: Car[];

    cars3: Car[];

    cars4: Car[];

    cars5: Car[];

    virtualCars: Car[];

    totalRecords: number;

    cols: any[];

    frozenCars: Car[];

    frozenCols: any[];

    scrollableCols: any[];

    sales: any[];

    loading: boolean;

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsMedium().then(cars => this.cars1 = cars);
        this.carService.getCarsSmall().then(cars => this.cars2 = cars);
        this.carService.getCarsMedium().then(cars => this.cars3 = cars);
        this.carService.getCarsMedium().then(cars => this.cars4 = cars);
        this.carService.getCarsMedium().then(cars => this.cars5 = cars);

        this.cols = [
            &#123; field: 'vin', header: 'Vin' &#125;,
            &#123; field: 'year', header: 'Year' &#125;,
            &#123; field: 'brand', header: 'Brand' &#125;,
            &#123; field: 'color', header: 'Color' &#125;
        ];

        this.scrollableCols = [
            &#123; field: 'year', header: 'Year' &#125;,
            &#123; field: 'brand', header: 'Brand' &#125;,
            &#123; field: 'color', header: 'Color' &#125;,
            &#123; field: 'year', header: 'Year' &#125;,
            &#123; field: 'brand', header: 'Brand' &#125;,
            &#123; field: 'color', header: 'Color' &#125;
        ];

        this.frozenCols = [
            &#123; field: 'vin', header: 'Vin' &#125;
        ];

        this.frozenCars = [
            &#123; "brand": "BMW", "year": 2013, "color": "Grey", "vin": "fh2uf23" &#125;,
            &#123; "brand": "Chevrolet", "year": 2011, "color": "Black", "vin": "4525g23" &#125;
        ];

        this.sales = [
            &#123; brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' &#125;,
            &#123; brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' &#125;,
            &#123; brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' &#125;,
            &#123; brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,' &#125;,
            &#123; brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' &#125;,
            &#123; brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' &#125;,
            &#123; brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' &#125;,
            &#123; brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' &#125;,
            &#123; brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' &#125;,
            &#123; brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' &#125;
        ];

        this.totalRecords = 250000;
        this.loading = true;
    &#125;

    loadDataOnScroll(event: LazyLoadEvent) &#123;
        this.loading = true;

        //for demo purposes keep loading the same dataset
        //in a real production application, this data should come from server by building the query with LazyLoadEvent options
        setTimeout(() => &#123;
            this.virtualCars = [
                &#123;"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first&#125;,
                &#123;"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 1&#125;,
                &#123;"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 2&#125;,
                &#123;"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 3&#125;,
                &#123;"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 4&#125;,
                &#123;"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 5&#125;,
                &#123;"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 6&#125;,
                &#123;"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 7&#125;,
                &#123;"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 8&#125;,
                &#123;"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 9&#125;,
                &#123;"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 10&#125;,
                &#123;"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 11&#125;,
                &#123;"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 12&#125;,
                &#123;"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 13&#125;,
                &#123;"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 14&#125;,
                &#123;"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 15&#125;,
                &#123;"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 16&#125;,
                &#123;"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 17&#125;,
                &#123;"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 18&#125;,
                &#123;"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 19&#125;,
                &#123;"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 20&#125;,
                &#123;"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 21&#125;,
                &#123;"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 22&#125;,
                &#123;"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 23&#125;,
                &#123;"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 24&#125;,
                &#123;"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 25&#125;,
                &#123;"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 26&#125;,
                &#123;"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 27&#125;,
                &#123;"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 28&#125;,
                &#123;"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 29&#125;,
                &#123;"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 30&#125;,
                &#123;"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 31&#125;,
                &#123;"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 32&#125;,
                &#123;"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 33&#125;,
                &#123;"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 34&#125;,
                &#123;"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 35&#125;,
                &#123;"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 36&#125;,
                &#123;"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 37&#125;,
                &#123;"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 38&#125;,
                &#123;"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 39&#125;
            ];

            this.loading = false;
        &#125;, 1000);
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>

        <p-tabPanel header="tablescrolldemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablescrolldemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Vertical&lt;/h3&gt;
&lt;p-table [columns]="cols" [value]="cars1" [scrollable]="true" scrollHeight="200px"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Virtual Scroll - 250K Rows&lt;/h3&gt;
&lt;p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" [rows]="20" scrollHeight="200px" [virtualScroll]="true" (onLazyLoad)="loadDataOnScroll($event)"
    [lazy]="true" [totalRecords]="totalRecords" [virtualRowHeight]="28"  [loading]="loading"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr style="height:28px"&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Horizontal&lt;/h3&gt;
&lt;p-table [columns]="cols" [value]="cars2" [scrollable]="true" [style]="&#123;width:'500px'&#125;"&gt;
    &lt;ng-template pTemplate="colgroup" let-columns&gt;
        &lt;colgroup&gt;
            &lt;col *ngFor="let col of columns" style="width:250px"&gt;
        &lt;/colgroup&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Horizontal and Vertical&lt;/h3&gt;
&lt;p-table [columns]="cols" [value]="cars3" [scrollable]="true" [style]="&#123;width:'500px'&#125;" scrollHeight="200px"&gt;
    &lt;ng-template pTemplate="colgroup" let-columns&gt;
        &lt;colgroup&gt;
            &lt;col *ngFor="let col of columns" style="width:250px"&gt;
        &lt;/colgroup&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Frozen Rows&lt;/h3&gt;
&lt;p-table [columns]="cols" [value]="cars4" [frozenValue]="frozenCars" [scrollable]="true" scrollHeight="200px"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="frozenrows" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &lt;b&gt;&#123;&#123;rowData[col.field]&#125;&#125;&lt;/b&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Frozen Columns&lt;/h3&gt;
&lt;p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars5" [scrollable]="true" scrollHeight="200px" frozenWidth="200px"&gt;
    &lt;ng-template pTemplate="colgroup" let-columns&gt;
        &lt;colgroup&gt;
            &lt;col *ngFor="let col of columns" style="width:200px"&gt;
        &lt;/colgroup&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Frozen Columns and Frozen Rows&lt;/h3&gt;
&lt;p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [frozenValue]="frozenCars" [value]="cars5" [scrollable]="true" scrollHeight="200px" frozenWidth="200px"&gt;
    &lt;ng-template pTemplate="colgroup" let-columns&gt;
        &lt;colgroup&gt;
            &lt;col *ngFor="let col of columns" style="width:200px"&gt;
        &lt;/colgroup&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="frozenrows" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &lt;b&gt;&#123;&#123;rowData[col.field]&#125;&#125;&lt;/b&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Frozen Column Groups&lt;/h3&gt;
&lt;p-table [value]="sales" [scrollable]="true" scrollHeight="150px" frozenWidth="200px"&gt;
    &lt;ng-template pTemplate="frozenheader"&gt;
        &lt;tr&gt;
            &lt;th style="width:200px;height:102px"&gt;Brand&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="frozenbody" let-sale&gt;
        &lt;tr&gt;
            &lt;td&gt;&#123;&#123;sale.brand&#125;&#125;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th colspan="4"&gt;Sale Rate&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th colspan="2"&gt;Sales&lt;/th&gt;
            &lt;th colspan="2"&gt;Profits&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th&gt;Last Year&lt;/th&gt;
            &lt;th&gt;This Year&lt;/th&gt;
            &lt;th&gt;Last Year&lt;/th&gt;
            &lt;th&gt;This Year&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-sale&gt;
        &lt;tr&gt;
            &lt;td&gt;&#123;&#123;sale.lastYearSale&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;sale.thisYearSale&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;sale.lastYearProfit&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;sale.thisYearProfit&#125;&#125;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
